<template>
  <el-dialog
    :title="type == 'add' ? '新增' : '修改'"
    :visible.sync="show"
    :close-on-click-modal="false"
    :before-close="cancel"
    width="30%"
  >
    <el-form :model="ruleForm" :rules="rules" ref="form" label-width="80px">
      <el-form-item label="专题名称" prop="topicName">
        <el-input v-model="ruleForm.topicName" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="所属模块" prop="division">
        <el-select v-model="ruleForm.division" placeholder="请选择所属模块">
          <el-option
            v-for="(item, i) in module"
            :key="i"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专题排序" prop="sort">
        <el-input-number v-model="ruleForm.sort" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="备注信息">
        <el-input
          type="textarea"
          :rows="2"
          style="width: 80%"
          v-model="ruleForm.remark"
        ></el-input>
      </el-form-item>
      <el-form-item class="icon" label="专题图标" prop="icon">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img
            v-if="ruleForm.icon !== null"
            :src="ruleForm.img"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div class="tip">请上传png、jgp格式图片</div>
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="sub" :loading="loading"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    const validateIcon = (rule, value, callback) => {
      if (this.ruleForm.icon !== null) {
        callback();
      } else {
        callback("请选择图标");
      }
    };
    return {
      loading: false,
      type: null,
      show: false,
      module: null,
      ruleForm: {
        id: null,
        topicName: null,
        division: null,
        sort: 1,
        remark: null,
        icon: null,
        img: null,
        status: 1,
      },
      icons: ["jpg", "png"],
      rules: {
        topicName: [
          { required: true, message: "请输入专题名称", trigger: "blur" },
        ],
        division: [
          { required: true, message: "请选择所属模块", trigger: "change" },
        ],
        sort: [
          { required: true, message: "请选择专题排序", trigger: "change" },
        ],
        icon: [{ validator: validateIcon, trigger: "change" }],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      base64String: null,
    };
  },
  created() {
    this.$http.get("/cgjybzIndustry/getModuleInfo").then((res) => {
      let da = res.data.data;
      this.module = [
        ...new Set(
          da.reduce((prev, cur) => {
            cur.division !== "" ? prev.push(cur.division) : null;
            return prev;
          }, [])
        ),
      ];
    });
  },
  methods: {
    showModal(type, ev) {
      this.type = type;
      this.show = true;
      if (type !== "add") this.ruleForm = { ...ev };
      this.ruleForm.img = this.ruleForm.icon;
    },

    cancel() {
      this.$refs["form"].resetFields();
      this.show = false;
      this.ruleForm = {
        id: null,
        topicName: null,
        division: null,
        sort: 1,
        remark: null,
        icon: null,
        img: null,
        status: 1,
      };
      this.$emit("cancel");
    },
    sub() {
      this.$refs["form"].validate((res) => {
        console.log(res);
        if (res) {
          this.loading = true;
          console.log(this.ruleForm);
          this.$http
            .post(
              this.type == "add"
                ? `/cgjybzTopicConfiguration/addTopicConfiguration`
                : `/cgjybzTopicConfiguration/updateTopicConfiguration`,
              this.ruleForm
            )
            .then((res) => {
              if (res.data.msg == "success") {
                this.$message.success("操作成功");
                this.cancel();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    async beforeAvatarUpload(file) {
      if (
        this.icons.includes(
          file.name.substring(file.name.indexOf(".") + 1, file.name.length)
        )
      ) {
        let reader = new FileReader();
        reader.onloadend = () => {
          // 将文件转换成base64字符串
          this.ruleForm.icon = reader.result;
        };
        reader.readAsDataURL(file);
        this.ruleForm.img = URL.createObjectURL(file);
      } else {
        this.$message.error("请选择正确的图片格式");
      }
      return true;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
::v-deep .icon .el-form-item__label::before {
  content: "*";
  color: #f56c6c;
  margin-right: 4px;
}
.tip {
  position: absolute;
  bottom: -15px;
}
</style>
